HTML Background Images |
您所在的位置:网站首页 › page 44 background design images › HTML Background Images |
HTML Background Images
❮ Previous
Next ❯
A background image can be specified for almost any HTML element. Background Image on a HTML elementTo add a background image on an HTML element, use the HTML style attribute and the CSS background-image property: ExampleAdd a background image on a HTML element: Try it Yourself » You can also specify the background image in the element, in the section: ExampleSpecify the background image in the element: p { background-image: url('img_girl.jpg'); } Try it Yourself » Background Image on a PageIf you want the entire page to have a background image, you must specify the background image on the element: ExampleAdd a background image for the entire page: body { background-image: url('img_girl.jpg'); } Try it Yourself » Background RepeatIf the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element: Example body { background-image: url('example_img_girl.jpg');} Try it Yourself »To avoid the background image from repeating itself, set the background-repeat property to no-repeat. Example body { background-image: url('example_img_girl.jpg'); background-repeat: no-repeat;} Try it Yourself » Background CoverIf you want the background image to cover the entire element, you can set the background-size property to cover. Also, to make sure the entire element is always covered, set the background-attachment property to fixed: This way, the background image will cover the entire element, with no stretching (the image will keep its original proportions): Example body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } Try it Yourself » Background StretchIf you want the background image to stretch to fit the entire element, you can set the background-size property to 100% 100%: Try resizing the browser window, and you will see that the image will stretch, but always cover the entire element. Example body { background-image: url('img_girl.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } Try it Yourself » HTML Exercises Learn More CSSFrom the examples above you have learned that background images can be styled by using the CSS background properties. To learn more about CSS background properties, study our CSS Background Tutorial. ❮ Previous Next ❯ ★ +1 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |